<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    
    <script type="text/javascript" src="resources/js/jquery-1.7.1.min.js"/>
    <script>
        $(document).ready(function() {
            $("#loginFormHolder").fadeIn(1000);
        });
    </script>
    
    <h:head>
        <title>Facelet Title</title>
        <h:outputStylesheet library="styles" name="styles.css" />
        <h:outputStylesheet library="styles" name="theme.css" />
    </h:head>
    <h:body>
        <f:view id="wholeView">
            <div class="headerWrapper">
                <ui:insert name="header" >
                    <ui:include src="/pages/common/header.xhtml" />
                </ui:insert>
            </div>
            
            <div id="loginFormHolder" class="invisible rounded-border with-shadow">
            <h:form id="loginForm">
                <table>
                    <tr>
                        <td>
                            <h:outputLabel value="User Name" for="j_username"/>        
                        </td>
                        <td>
                            <h:inputText id="j_username"
                                   value="#{loginBean.username}" size="36"
                                   maxlength="80" required="true"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h:outputLabel value="Password" for="j_password"/>        
                        </td>
                        <td>
                            <h:inputSecret id="j_password"
                                     value="#{loginBean.password}" size="36"
                                     maxlength="80" required="true"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <h:messages class="errorMessage" />        
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align: right; ">                            
                            <h:commandButton action="registration.xhtml" value="Register" class="styled-button" />
                            <h:commandButton actionListener="#{loginBean.login}" value="Login" class="styled-button" />
                        </td>
                    </tr>
                </table>

            </h:form>
            </div>
        </f:view>
    </h:body>
</html>

